<html lang="en"> <head> <script src="https://d3js.org/d3.v3.js"></script> </head> <body>
    <p></p>
    <p></p>
    <p></p>
    <script type="text/javascript" charset="utf-8">
        // Update、Enter、Exit 是 D3 中三个非常重要的概念, 它处理的是当选择集和数据的数量关系不确定的情况
        var dataset = [3, 6, 9, 12, 15];
        var p = d3.select("body").selectAll("p");                      // 选择 body 中的 p 元素
        var update = p.data(dataset);                                  // 获取 update 部分
        var enter = update.enter();                                    // 获取 enter 部分
        update.text(function(d) { return "update " + d; });            // update 部分的处理: 更新属性值
        enter.append("p").text(function(d) { return "enter " + d; });  // enter 部分的处理: 添加元素后赋予属性值

        var dataset = [3];
        var p = d3.select("body").selectAll("p");            // 选择 body 中的 p 元素
        var update = p.data(dataset);                        // 获取 update 部分
        var exit = update.exit();                            // 获取 exit 部分
        update.text(function(d) { return "update " + d; });  // update 部分的处理: 更新属性值
        exit.text(function(d) { return "exit"; });           // exit 部分的处理: 修改p元素的属性
        // exit.remove(); // exit 部分的处理通常是删除元素
    </script> </body> </html>
